<template>
	<view class="container">
		<view class="top_title">
			<!-- <view class="name" :class="selectItem=='job'?'active_name':''" @click="selectOne('job')">
				招聘
			</view>
			<view class="name" :class="selectItem=='car'?'active_name':''" @click="selectOne('car')">
				用车
			</view> -->
		</view>
		<view class="employ_part" v-for="(item,index) in employList" :key="index" @click="goDetail(item.collectId)">
			<view class="left">
				<view class="name">
					{{item.data.title}}
				</view>
				<view class="distance_address">
				  {{item.data.city + item.data.address}}
				</view>
				<view class="types">
					<view class="type_item" v-for="(type,i) in item.data.positionLabel" :key="i">
						{{type}}
					</view>
				</view>
				<view class="company_person">
					<text>{{item.data.companyData.name}} &nbsp;|&nbsp;招聘者</text>
				</view>
			</view>
			<view class="right">
				<view class="distance_address">
					{{item.data.publishType}}
				</view>
				<view class="money">
					￥{{item.data.salary}}
				</view>
				<view class="go_rob">
					抢单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        selectItem:"job",
        imgYu: 'http://zf.hualin688.com',
				employList: [],
        type: 1
				
			}
    },
    mounted() {
			this.getList()
		},
		methods: {
      goDetail(id) {
        uni.navigateTo({
          url:"/pages/jobDetail/jobDetail?id="+ id
        })
      },
			selectOne(val){
        console.log(val)
        this.selectItem=val;
        if (val == 'job') {
          this.type = 1
          this.getList()
        } else if (val == 'car') {
          this.type = 2
          this.getList()
        }
				
			},
			getList(){
        let _this = this
        this.$utils.requert({url:'myCollectList',data:{type:this.type},type:'post'}).then(res=>{
          if(res.code === 1 ){
						let datas = res.data
						datas.forEach((element)=>{
							console.log(element)
							element.data.positionLabel = (element.data.positionLabel).splice(0,4)
						})
						this.employList = datas
          }else{    
            this.$utils.showLayer(res.message)
          }
        })
			}

			
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		padding:0 24rpx;
		box-sizing: border-box;
	}
	.employ_part{
		padding:40rpx 0;
		border-bottom:1rpx solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.employ_part .name{
		font-size: 31rpx;
		color:#323232;
	}
	 .distance_address{
		font-size: 24rpx;
		color: #838282;
	}
	.left .distance_address{
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.employ_part .types{
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	.employ_part .types .type_item{
		padding:0 8rpx;
		border:1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		flex-shrink: 0;
	}
	.company_person{
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.company_person image{
		width:42rpx;
		height: 42rpx;
		margin-right: 17rpx;
	}
	.right{
	 text-align: right;
	 display: flex;
	 margin-right: 20rpx;
	 flex-direction: column;
	}
	.left{
		flex: 1;
	 width: 20%;
	}
	.right .money{
		font-size: 28rpx;
		color:#FB8408;
	}
	.go_rob{
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color:#Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		right: 0;
		border-radius: 7rpx;
	}
	
	
	.top_title{
		display: flex;
		margin-top: 18rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f6f6f6;
		align-items: baseline;
	}
	.top_title .name{
		margin-right: 70rpx;
		font-size: 28rpx;
		color: #333333;	
	}
	.top_title .active_name{
		font-size: 34rpx;
		color: #FB8408;
	}

</style>
